<template>
    <div class="choose_file">
        <el-upload
            ref="choose_file"
            drag
            action="/"
            :limit="1"
            :on-exceed="on_exceed"
            :on-change="on_change"
            :show-file-list="false"
            :auto-upload="false">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击选取</em></div>
            <div class="upload_text">{{file.name}}</div>
        </el-upload>
    </div>
</template>

<script>
export default {   //单个文件选择器组件
    name:"Choose_file",
    props:{
        size:{  //文件的大小最大值限制 单位 M
            type:Number,
            default:30,
        },
    },
    data(){
        return{
           file:{}, //选择好的文件对象
        }
    },
    methods:{
        on_change(file){  //文件状态发生改变时的钩子
            if(file){
                this.file = file.raw;
                this.$emit("file_change",this.file);
            }
        },
        on_exceed(files){ //上传文件超出个数时执行
            this.file = files[0];
            this.$emit("file_change",this.file);
        },
        clear_files(){ //清除已选择的文件
            this.$refs.choose_file.clearFiles();
            this.file = {};
        },
    },
}
</script>

<style scoped lang="scss">
.choose_file{
    box-sizing: border-box;
    margin: 0 auto;
    width:fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: start;
    background-color:#f1f5f8;
    border-radius: 5px;
    padding: 20px 20px;
    width: 100%;
    /deep/.upload_text{
        font-size: 15px;
        margin-top: 10px;
    }
}
</style>
